
<template>
<view>
	<view>
		<uni-search-bar @confirm="search" :focus="true" v-model="searchVal" @blur="blur" @focus="focus" @input="handleInput"
						@cancel="cancel" @clear="clear">
		</uni-search-bar>
	</view>
    <view class="content">
      <view class="list" v-for="(item, index) in news" :key="index"@tap = "openinfo":data-newsid = "item.post_id">
        <image mode="widthFix" :src="item.cover"></image>
        <view class="title">{{ item.title }}</view>
		<view class="author-container"> <image class="author-avatar":src="item.cover"mode="aspectFill"></image>
		<view class="au_name">{{ item.author_name }}</view></view>
        </view>
	</view>
</view>
</template>



<script>
	export default {
		data() {
			return {
				news : [],
				searchVal : '',
				timer : null
			};
		},

		onLoad:function(){
			uni.showLoading({
				title:"加载中....."
			})
			uni.request({
				url:'https://unidemo.dcloud.net.cn/api/news',
				method:'GET',
				data: {},
				success:res=> {
					console.log(res);
					this.news = res.data;
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});

		},
		methods:{
			openinfo(e){
				var newsid = e.currentTarget.dataset.newsid;
				console.log(e)
				uni.navigateTo({
					url: '../info/info?newsid='+newsid
				});
			},
			search(e) {
				uni.showToast({
					title: '搜索：' + e.value,
					icon: 'none'
				})
			},
			handleInput(e) {
				    if (this.timer) {
				        clearTimeout(this.timer);
				      }
				      this.timer = setTimeout(() => {
				        console.log('input:',e);
				      }, 500);
					this.searchVal = e.value;
			},
			clear(e) {
				uni.showToast({
					title: 'clear事件，清除值为：' + e.value,
					icon: 'none'
				})
			},
			blur(e) {
				uni.showToast({
					title: 'blur事件，输入值为：' + e.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(e) {
				uni.showToast({
					title: '点击取消，输入值为：' + e.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
		
	}
</script>

 
<style lang="scss" scoped>
	
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
.author-container {
  display: flex;
  align-items: center;
  gap: 12rpx;
  
  .author-avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    border: 1rpx solid #eee;
  }
}
image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
  text-align: justify;       
}
.au_name {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;
}

</style>









<!-- <template>
  <view>
	<view>
		<uni-search-bar @confirm="search" :focus="true" v-model="searchVal" @blur="blur" @focus="focus" @input="handleInput"
						@cancel="cancel" @clear="clear">
		</uni-search-bar>
	</view>
    <view class="content">
      <view class="list" v-for="(item, index) in news" :key="index"@tap = "openinfo":data-newsid = "item.post_id">
        <image mode="widthFix" :src="item.cover"></image>
        <view class="title">{{ item.title }}</view>
        <view class="au_name">{{ item.author_name }}</view>
      </view>
    </view>
  </view>
</template>



<script>
	export default {
		data() {
			return {
				news : [],
				searchVal : '',
				timer : null
			};
		},

		onLoad:function(){
			uni.showLoading({
				title:"加载中....."
			})
			uni.request({
				url:'https://unidemo.dcloud.net.cn/api/news',
				method:'GET',
				data: {},
				success:res=> {
					console.log(res);
					this.news = res.data;
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});

		},
		methods:{
			openinfo(e){
				var newsid = e.currentTarget.dataset.newsid;
				console.log(e)
				uni.navigateTo({
					url: '../info/info?newsid='+newsid
				});
			},
			search(e) {
				uni.showToast({
					title: '搜索：' + e.value,
					icon: 'none'
				})
			},
			handleInput(e) {
				    if (this.timer) {
				        clearTimeout(this.timer);
				      }
				      this.timer = setTimeout(() => {
				        console.log('input:',e);
				      }, 500);
					this.searchVal = e.value;
			},
			clear(e) {
				uni.showToast({
					title: 'clear事件，清除值为：' + e.value,
					icon: 'none'
				})
			},
			blur(e) {
				uni.showToast({
					title: 'blur事件，输入值为：' + e.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(e) {
				uni.showToast({
					title: '点击取消，输入值为：' + e.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
		
	}
</script>

 
<style scoped>
	
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
}
.au_name {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;
}

</style> -->




